<template>
	<view>
		<view style="width: 710rpx;margin: 40rpx 20rpx 0rpx;" class="rows">
			<view @click="selecta(item.id,item.name)" class="header_nav" :class="item.id == selectb?'selectc' : ''" v-for="(item,index) in headerNav"
			 :key="index">
				<view>{{item.name}}</view>
			</view>
		</view>
		<view style="width: 710rpx;margin: 20rpx 20rpx;" v-for="(item,index) in orderList" :key="index" v-if="selectb == item.status">
			<view class="order_totals">
				<view class="rowsb" style="padding: 0rpx 20rpx;">
					<view class="fs26 col333">订单号：{{item.orderno}}</view>
					<!-- 订单状态 -->
					<view class="fs26 col333">{{orderNameList[item.status]}}</view>
					<!-- <view class="fs26 col333"></view> -->
				</view>
				<view class="order_shang_pin rows tct">
					<view style="flex: 0 0 33.33%;" v-for="(ite,inde) in item.good_list" v-if="inde<3" @click="orderDetailMen(item)">
						<image :src="image+ite.img" mode="" style="max-width: 200rpx;height: 200rpx;border-radius: 8rpx;background-color: #F1F1F1;"></image>
					</view>

				</view>
				<view class="rowse fs28 bold" style="color: #D2465C;padding: 0rpx 20rpx 0rpx;">￥{{item.amount}}</view>
				<view class="rowse" style="padding: 8rpx 20rpx;">
					<view class="select_aaa" v-if="item.status==1 " @click="cancelOrder(item.id)">取消订单</view>
					<view class="select_aaa" v-else @click="orderRefund(item)">申请退款</view>
					<view class="select_aaa" @click="orderDetailMen(item)">查看详情</view>
					<view class="select_bbb">立即支付</view>
				</view>
			</view>
		</view>
		<view class="warp align-center rowsc" v-if="orderSet">
			<view class="margin-xl padding bg-gray radius" style="background-color: #FFFFFF;width: 70%;">
				<view class="text-center  padding-bottom border-bottom">
					<view class="text-bold">
						温馨提示
					</view>
					<view class="text-gray margin-top">确定删除该订单吗？</view>
				</view>
				<view class="flex justify-around text-xl margin-top">
					<view class="" @click="orderSet=false">
						取消
					</view>
					<view class="" style="color: #007AFF;" @click="submitOrderDetail()">确定</view>
				</view>
			</view>
		</view>


		<!-- 积分订单 -->
		<view v-if="orderList==''" class="text-center text-gray padding">
			暂无更多内容
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		orderListApi,
		stateOrder,
		getIntegralOrderList
	} from '../../common/path.js'
	export default {
		data() {
			return {
				orderNameList: [
					'',
					'待付款',
					'待发货',
					'待收货',
					'已完成'
				],
				orderSet: false,
				headerNav: [{
						name: '全部',
						id: '0'
					},
					{
						name: '待支付',
						id: '1'
					},
					{
						name: '待发货',
						id: '2'
					},
					{
						name: '待收货',
						id: '3'
					},
					{
						name: '已完成',
						id: '4'
					},
					{
						name: '售后',
						id: '5'
					},
				],
				orderList: [],
				selectb: '1', //当前选择
				cancelOrderId: '',
				image: '',
				integralOrderList: [], //积分订单
			}
		},
		onLoad(option) {
			this.image = app.image
			if (option.id) {
				this.selectb = option.id
			}
			this.orderListApi() //普通订单
		},
		onShow() {
			// this.getIntegralOrderList() //积分订单
			this.orderListApi()
		},
		methods: {
			//用于确认收货时刷新订单
			confirmReceipt(e){
				this.getIntegralOrderList()
			},
			//申请退款
			orderRefund(item) {
				uni.navigateTo({
					url: 'orderRefund?id=' + item.id
				})
			},
			//取消订单id
			cancelOrder(id) {
				this.cancelOrderId = id
				this.orderSet = true
				console.log('当前订单id========>', this.cancelOrderId)
			},
			//获取购物车列表
			orderListApi() {
				let data = {
					user_id: app.userInfo.id + "",
					status: this.selectb + "",
					type: 1 + ""
				}
				this.$axios.axios('POST', orderListApi, data)
					.then(res => {
						console.log("获取订单列表======>", res)
						console.log("获取订单列表======>", res.data)
						this.orderList = res.data
					})
					.catch(err => {
						console.log(err)
					})
			},
			submitOrderDetail() {
				this.orderSet = false
				let data = {
					order_id: this.cancelOrderId,
					user_id: app.userInfo.id,
					status: 9 + ''
				}
				this.$axios.axios("POST", stateOrder, data)
					.then(res => {
						this.orderListApi()
						this.$tools.showToast('取消成功')
						console.log('取消是否成功===>', res)
					})
					.catch(err => {
						console.log(err)
					})
			},

			selecta(event, name) { //顶部的选择
				if (this.selectb == event) return false; //如果相同 结束
				this.selectb = event; //赋值
				this.orderListApi()
				this.getIntegralOrderList()
			},
			orderDetailMen(item) {
				uni.navigateTo({
					url: 'affirmOrder/affirmOrder?id=' + item.id + '&status=' + item.status
				})
			},
		
		}
	}
</script>

<style scoped>
	@import url("order.css");
</style>
